<template>
    <div class="pageWrapper">
        <SearchBar @onSearch="handleSearch" @childFn="resetForm">
            <SearchBarItem label="渠道支付订单号：" :labelLg="8">
                <Input
                    type="text"
                    v-model="searchModule.flowId"
                    placeholder="请输入"
                    clearable
                />
            </SearchBarItem>
            <SearchBarItem label="支付订单号：" :labelLg="8">
                <Input
                    type="text"
                    v-model="searchModule.paymentId"
                    placeholder="请输入"
                    clearable
                />
            </SearchBarItem>
            <SearchBarItem label="支付渠道：" :labelLg="8">
                <Select
                    v-model="searchModule.paymentChannel"
                    placeholder="请选择"
                    :clearable="isClear"
                >
                    <Option
                        :value="item.key"
                        v-for="(item, key) in paymentChannel"
                        :key="key"
                        >{{ item.value }}</Option
                    >
                </Select>
            </SearchBarItem>
            <SearchBarItem label="支付方式：" :labelLg="8">
                <Select
                    v-model="searchModule.paymentWay"
                    placeholder="请选择"
                    :clearable="isClear"
                >
                    <Option
                        :value="item.key"
                        v-for="(item, key) in payment"
                        :key="key"
                        >{{ item.value }}</Option
                    >
                </Select>
            </SearchBarItem>
            <SearchBarItem label="支付状态：" :labelLg="8">
                <Select
                    v-model="searchModule.payStatus"
                    placeholder="请选择"
                    :clearable="isClear"
                >
                    <Option
                        :value="item.key"
                        v-for="(item, key) in payStatus"
                        :key="key"
                        >{{ item.value }}</Option
                    >
                </Select>
            </SearchBarItem>

            <SearchBarItem label="交易时间：" :labelLg="8">
                <DatePicker
                    type="daterange"
                    ref="createDatePicker"
                    :value="searchModule.dataTime"
                    split-panels
                    transfer
                    placeholder="请选择"
                    @on-change="searchTime"
                ></DatePicker>
            </SearchBarItem>
            <SearchBarItem label="收单机构订单号：" :labelLg="8">
                <Input
                    type="text"
                    v-model="searchModule.tradeNo"
                    placeholder="请输入"
                    clearable
                />
            </SearchBarItem>
        </SearchBar>
        <RemoteTable :namespace="namespace" :columns="columns" @onSortChange="onSortChange">
          <template #extra>
            <Authc permissions="trade:payment:payOrder:export">
              <Button :loading="exportLoading" type="primary" icon="ios-download-outline" @click="exportExcel">导出</Button>
            </Authc>
          </template>
        </RemoteTable>
    </div>
</template>

<script>
import {
    Button,
    Input,
    Modal,
    Message,
    Col,
    Row,
    Form,
    FormItem,
    DatePicker,
    Select,
    Option,
    Card
} from "view-design";
import RemoteTable from "@/components/RemoteTable";
import SearchBar from "@/components/SearchBar";
import RemoteSelect from "@/components/RemoteSelect";
import { namespace } from "../Module/payOrder.js";
import Authc from "@/components/Authc";
import Action from "./Action";
import config from "@/utils/config";
import appService from "@/utils/appService";
import util from "@/utils/util";

export default {
    name: "tables_page",
    components: {
        RemoteTable,
        SearchBar,
        SearchBarItem: SearchBar.SearchBarItem,
        RemoteSelect,
        Authc,
        Action,
        Button,
        Input,
        Modal,
        Message,
        Col,
        Row,
        Form,
        FormItem,
        DatePicker,
        Select,
        Option,
        Card
    },
    data() {
        return {
            requireUrl: "",
            namespace: namespace,
            isClear: true,
            loading: true,
            modal1: false,
            exportLoading: false,
            searchModule: {
                dataTime: []
            },
            payStatus: [], // 支付状态
            payment: [], // 支付方式
            paymentChannel: [], // 支付渠道
            payScence: [], // 支付场景
            tableData: [],
            columns: [
                {
                    title: "序号",
                    type: "index",
                    align: "center",
                    // fixed: "left",
                    width: 80
                },
                {
                    title: "支付订单号",
                    key: "paymentId",
                    align: "center",
                    // fixed: "left",
                    minWidth: 220
                },
                {
                    title: "渠道支付订单号",
                    key: "flowId",
                    align: "center",
                    minWidth: 220
                },
                {
                    title: "订单应收金额(元)",
                    key: "orderAmount",
                    align: "center",
                    minWidth: 130,
                    render: (h, params) => {
                        let item = params.row.orderAmount / 100;
                        return h("span", util.toMoney(item));
                    }
                },
                {
                    title: "交易金额(元)",
                    key: "amount",
                    align: "center",
                    minWidth: 120,
                    render: (h, params) => {
                        let item = params.row.amount / 100;
                        return h("span", util.toMoney(item));
                    }
                },
                {
                    title: "支付渠道",
                    key: "paymentChannelCn",
                    align: "center",
                    minWidth: 120
                },
                {
                    title: "支付方式",
                    key: "paymentWayCn",
                    align: "center",
                    minWidth: 120
                },
                {
                    title: "支付状态",
                    key: "payStatusCn",
                    align: "center",
                    minWidth: 100
                },
                {
                    title: "交易订单创建时间",
                    key: "createTime",
                    align: "center",
                    minWidth: 150
                },
                {
                    title: "交易时间",
                    key: "flowTime",
                    align: "center",
                    minWidth: 150
                },
                {
                    title: "操作",
                    key: "action",
                    align: "center",
                    // fixed: "right",
                    permissions: ["trade:payment:payOrder"],
                    width: 130,
                    render: function(h, data) {
                        return h(Action, {
                            props: {
                                row: data.row
                            }
                        });
                    }
                }
                // {
                //   title: '操作',
                //   key: 'handle',
                //   width: 160,
                //   options: ['delete', 'check', 'edit'],
                //   buttons: [
                //     (h, params, vm) => {
                //       return this.dealBtnsOPeration(h, params, vm)
                //     }
                //   ]
                // }
            ]
        };
    },
    created() {
        /** 重置请求参数, 解决搜索之后，请求参数没有清空的问题 **/
        this.$store.commit(`${namespace}/reviseQuery`);
        this.getSelect();
    },
    methods: {
        getSelect() {
            this.$store.dispatch(`${namespace}/getSearchKey`).then(res => {
                if (res.data.errorCode === 0) {
                    let data = res.data.data;
                    this.payStatus = data.flowStatus;
                    this.payment = data.paymentSubChannel;
                    this.paymentChannel = data.paymentChannel;
                    this.payScence = data.paySceneStatus;
                }
            });
        },
        // 清空事件；
        resetForm() {
            this.$set(this.searchModule, "flowId", "");
            this.$set(this.searchModule, "paymentId", "");
            this.$set(this.searchModule, "paymentChannel", "");
            this.$set(this.searchModule, "flopayment_wayw_id", "");
            this.$set(this.searchModule, "payStatus", "");
            this.$set(this.searchModule, "tradeNo", "");
            // 清空时间选择
            this.$refs["createDatePicker"].handleClear();
        },
        searchTime(date, type) {
            this.searchModule.flowTimeBegin = date ? date[0] : "";
            this.searchModule.flowTimeEnd = date ? date[1] : "";
        },
        handleSearch() {
            let pageSize = {
                currentPage: 1,
                pageSize: 10
            };
            this.$store.dispatch(`${namespace}/query`, {
                ...this.searchModule,
                ...pageSize
            });
        },
        onSortChange(sort) {
            if (sort.order === "normal") {
                this.queryParam.order = [];
            } else {
                this.queryParam.order = [sort.key + " " + sort.order];
            }
            this.handleSearch();
        },
        async exportExcel() {
            this.$data.exportLoading = true;
            try {
                let res = await this.$store.dispatch(`${namespace}/exportExcel`, this.searchModule);
                util.exportExcle(res, '渠道支付订单表');
            } catch (error) {
                this.$Message.error({
                content: '导出失败'
                })
            } finally {
                this.$data.exportLoading = false;
            }
        }
    },
    mounted() {
        setTimeout(() => {
            this.loading = false;
        }, 1000);
    }
};
</script>

<style></style>
